<template>
  <div id="subpage">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <b>网站设置</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item>首页轮播图列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div class="content">
      <div class="xcx-head">
        <div style="display: flex">
          <span>首页轮播图列表</span>
        </div>
        <div style="display: flex">
          <el-button @click="add()" size="small" icon="el-icon-plus" type="success">添加轮播图</el-button>
        </div>
      </div>

      <div class="search-box mt10">
        <el-form :inline="true">
          <el-form-item>
            <el-input placeholder="请输入关键词" v-model="search.keys"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getIndex()" icon="el-icon-search" type="primary">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="getClearIndex()" icon="el-icon-delete" type="info">清空筛选</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="xcx-content">
        <!--列表-->
        <el-table border :data="tableData" stripe size="small" style="width: 100%" v-loading="loading">
          <el-table-column align="center" prop="id" label="UID" width="80"></el-table-column>
          <el-table-column align="center" prop="sort" label="图片" width="150">
            <template slot-scope="scope">
              <img :src="scope.row.thumb" height="30" width="120" />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="名称">
            <template slot-scope="scope">
              <el-tag type="success" size="mini" v-if="scope.row.type == 1">城市地图</el-tag>
              <el-tag type="primary" size="mini" v-else>首页轮播图</el-tag>
              {{ scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column prop="urls" label="地址" width="520">
            <template slot-scope="scope">
              {{ scope.row.urls }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="140">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status == 1" plain icon="el-icon-open" size="mini" type="success"
                @click="setStatus(scope.row)">显示</el-button>
              <el-button v-else plain icon="el-icon-turn-off" size="mini" type="info"
                @click="setStatus(scope.row)">隐藏</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sort" label="排序" width="100"></el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template #default="scope">
              <el-button plain icon="el-icon-edit" size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
              <el-button plain icon="el-icon-delete" size="mini" type="danger"
                @click="del_item(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="paging">
          <el-pagination class="left" @current-change="handleCurrentChange" :current-page="page" background
            layout="total,prev, pager, next" :total="count"></el-pagination>
        </div>
      </div>
    </div>

    <!-- 添加广告位 -->
    <el-dialog title="添加首页轮播图" width="36%" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
      @close="closeDialog">
      <el-form ref="form_data" :model="form_data" :rules="rules" label-width="160px" style="width: 90%">
        <el-form-item label="分类：" prop="title">
          <el-select style="width: 100%;margin-right: 2%;" v-model="form_data.type" placeholder="请选择">
            <el-option label="首页轮播图" :value="0"></el-option>
            <el-option label="城市地图" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称：" prop="title">
          <el-input v-model="form_data.title" placeholder="请输入："></el-input>
        </el-form-item>
        <el-form-item label="轮播图：" prop="thumb">
          <el-upload :action="adminApi.upload_url" name="image" list-type="picture-card"
            :on-preview="handleThumbPreview" :on-success="handleThumbSuccess" :on-remove="thumbRemove"
            :file-list="fileList0" :limit="1">
            <i class="el-icon-plus"></i>
          </el-upload>
          <p class="form-tip">建议尺寸 1500×2000，或等比例缩放</p>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="名称：" prop="urls_type">
          <el-radio-group v-model="form_data.urls_type">
            <el-radio :label="0">公众号</el-radio>
            <el-radio :label="1">内页</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="链接地址：" prop="urls" v-if="form_data.urls_type == 1">
          <el-select style="width: 100%;margin-right: 2%;" v-model="form_data.urls" placeholder="请选择">
            <el-option label="快讯" value="/pages/index/news_det"></el-option>
            <el-option label="活动" value="/pages/index/news_det"></el-option>
            <el-option label="楼盘" value="/pages/good/good_det"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="链接ID：" v-if="form_data.urls_type == 1">
          <el-input v-model="form_data.ids" placeholder="请输入快讯、活动或楼盘的ID值："></el-input>
        </el-form-item>
        <el-form-item label="跳转地址：" prop="urls" v-if="form_data.urls_type == 0">
          <el-input style="width: 100%;" v-model="form_data.urls" type="textarea" :rows="3"
            placeholder="请输入微信公众号信息的URL地址，为空不跳转"></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="form_data.sort" placeholder="请输入排序"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="width: 120px;" icon="el-icon-back" @click="dialogFormVisible = false">取 消</el-button>
        <el-button style="width: 120px;" icon="el-icon-thumb" type="primary" @click="submitForm('form_data')">确
          定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import UploadOne from "../../components/upload/UploadOne";
export default {
  components: {
    UploadOne,
  },
  data() {
    return {
      loading: true,
      dialogVisible: false,
      dialogFormVisible: false,
      tableData: [],
      cateList: [],
      LmColumn: [],
      formLabelWidth: "120px",
      page: 0,
      count: 0,
      limit: 10,
      fileList0: [],
      dialogImageUrl: "",
      search: {
        keys: "",
      },
      form_data: {
        id: "",
        type: 0,
        title: "",
        urls_type: 0,
        urls: "",
        ids: "",
        thumb: "",
        sort: 0,
      },
      rules: {
        title: [{ required: true, message: "请填写名称", trigger: "blur" }],
        thumb: [{ required: true, message: "请上传轮播图", trigger: "blur" }],
      },
    };
  },
  //进入页面加载
  mounted: function () {
    var that = this;
    that.getList();
  },
  methods: {

    handleThumbSuccess(res, file) {
      this.form_data.thumb = res.data.img_url;
    },
    thumbRemove(file, fileList) {
      this.form_data.thumb = "";
    },
    handleThumbPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    getIndex() {
      this.getList();
    },

    getClearIndex() {
      this.search.keys = "";
      this.getList();
    },

    submitForm() {
      const that = this;
      that.$refs.form_data.validate((valid) => {
        if (!valid) return that.$message.warning("请完整填写内容!");
        var formData = {};
        formData = that.form_data;
        var url = "/advert/beforeSave";
        that.axios.post(url, formData).then((res) => {
          that.$message.success(res.msg);
          that.dialogFormVisible = false;
          that.form_data.id = "";
          that.form_data.title = "";
          that.form_data.urls = "";
          that.form_data.thumb = "";
          that.form_data.sort = 0;
          that.getList();
        });
      });
    },

    add() {
      this.form_data.id = "";
      this.form_data.title = "";
      this.form_data.urls = "";
      this.form_data.thumb = "";
      this.form_data.sort = 0;
      this.dialogFormVisible = true;
    },

    edit(e) {
      var that = this;
      that.id = e.id;
      that.axios.post("/advert/detail", { id: e.id }).then((res) => {
        if (res) {
          that.form_data = res.data;
          if (res.data.thumb) {
            let thumb = [
              {
                'name': "楼盘视频",
                'url': res.data.thumb,
              }
            ];
            this.fileList0 = thumb;
          }
          that.dialogFormVisible = true;
        }
      });
    },

    setStatus(row) {
      var that = this;
      that.axios.post("/advert/setStatus", { id: row.id }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          that.getList();
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },

    closeDialog() {
      const that = this;
      that.ruleForm.id = 0;
      that.ruleForm.title = "";
      that.ruleForm.urls = "";
      that.ruleForm.thumb = "";
      that.ruleForm.sort = 0;
    },

    /**
     * 下一页
     */
    handleCurrentChange(currentPage) {
      var that = this;
      that.page = currentPage;
      that.getList();
    },

    del_item(ids) {
      let that = this;
      this.$confirm("此操作不可逆, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        that.axios
          .post("/advert/destroy", {
            ids: ids,
          })
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              that.getList();
            } else {
              this.$message({
                type: "info",
                message: res.msg,
              });
            }
          });
      });
    },

    /**
     * 获取列表
     */
    getList() {
      let that = this;
      let formData = that.search;
      var curr_page = sessionStorage.getItem("curr_page");
      that.page = curr_page ? curr_page - 0 : that.page;
      formData.page = that.page;
      formData.limit = that.limit;
      that.axios.post("/advert/index", formData).then((res) => {
        if (res) {
          that.tableData = res.data.data;
          that.count = res.data.total;
          that.page = curr_page ? curr_page : that.page;
          curr_page ? sessionStorage.removeItem("curr_page") : "";
          that.loading = false;
        }
      });
    },
  },
};
</script>
<style></style>